<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>客户详情</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		body{
			background: #e9e9e9;
		}
		.customerDetail_headerUserInfo_container img{
			width: 60px;
			height: 60px;
			display: block;
			margin-right: 12px;
		}
		.customerDetail_mainCustomerInfoMember_content li img{
			width: 32px;
			height: 32px;
			display: block;
		}

		.customerDetail_header_contaienr{
			padding: 20px;
		}
		.customerDetail_header_content{
			background: #fff;
			padding: 20px;
			display: flex;
			box-shadow: 0 1px 2px rgba(0,0,0,.05);
		}
		.customerDetail_headerUserInfo_container{
			flex: 1;
			display: flex;
			align-items: center;
			border-right: 1px solid #f0f0f0;
		}
		.customerDetail_headerUserInfoName_container{
			display: flex;
			align-items: center;
		}
		.customerDetail_headerUserInfoName_container{
			display: flex;
			align-items: center;
		}
		.customerDetail_headerUserInfoName_container span{
			font-size: 16px;
			color: #000;
			margin-right: 8px;
		}
		.customerDetail_headerUserInfoName_container i{
			padding-top: 2px;
			color: #4c78f3;
		}
		.customerDetail_headerLable_container{
			flex: 2;
			display: flex;
			padding: 0 20px;
			font-size: 14px;
		}
		.customerDetail_headerLable_container b{
			font-weight: normal;
			color: #1E9FFF;
			cursor: pointer;
		}
		.customerDetail_main_contaienr{
			padding: 0 20px;
		}
		.customerDetail_main_content{
			background: #fff;
			box-shadow: 0 1px 2px rgba(0,0,0,.05);
		}
		.customerDetail_mainTitle_contaienr{
			height: 54px;
			padding: 0 20px;
			font-size: 14px;
			display: flex;
			align-items: center;
			border-bottom: 1px solid #f0f0f0;
		}
		.customerDetail_mainTitle_contaienr p{
			color: #000;
			font-weight: bold;
		}
		.customerDetail_mainCustomerInfo_contaienr{
			display: flex;
		}
		.customerDetail_mainCustomerInfoMember_contaienr{
			flex: 0 0 240px;
			padding: 20px 0 20px 20px;
			background: #fafafa;
			border-right: 1px solid #e0e0e0;
		}
		.customerDetail_mainCustomerInfoMember_content{

		}
		.customerDetail_mainCustomerInfoMember_content li{
			padding: 12px;
			cursor: pointer;
			color: rgba(0,0,0,.85);
			display: flex;
			align-items: center;
			margin-right: -1px;
		}
		.customerDetail_mainCustomerInfoMember_content li span{
			margin-left: 12px;
			font-size: 14px;
			color: rgba(0,0,0,.85);
		}
		.customerDetail_mainCustomerInfo_content{
			    padding: 26px 24px;
    flex: 1;
		}
		.customerDetail_mainCustomerInfo_List_contaienr p{
			color: rgba(0,0,0,.45);
    margin-bottom: 20px;
		}
		.customerDetail_mainCustomerInfo_List{
			
		}
		.customerDetail_mainCustomerInfo_List li{
			    padding: 18px 16px;
    display: flex;
    align-items: center;
    background: #fafafa;
    margin-bottom: 8px;
		}
		.customerDetail_mainCustomerInfo_List li p{
			margin: 0 12px;
    color: rgba(0,0,0,.85);
		}
		.customerDetail_mainCustomerInfo_List li i{
			padding-top: 2px;
    font-size: 14px;
    color: #919191;
		}

		.tabs_active{
			background: #fff;
			border: 1px solid #e0e0e0;
			border-right: none;
		}
	</style>
</head>
<body>
	<div class="customerDetail_header_contaienr">
		<div class="customerDetail_header_content">
			<div class="customerDetail_headerUserInfo_container">
				<img src="{$et->avatar}">
				<div class="customerDetail_headerUserInfoName_container">
					<span>{$et->name}</span>
					<!--<i class="layui-icon layui-icon-friends"></i>-->
				</div>
			</div>
			<div class="customerDetail_headerLable_container">
				<span>Ta的标签：</span>
				{loop $et->tags as $tag}
					<!--{if in_array($tag,$newEtTagArr)}
						{explode("_", $tag)[1]}&nbsp;
					{/if}-->
					{if $etTagArr[$tag]}
						{$etTagArr[$tag]}&nbsp;
					{/if}
				{/loop}
				<!--<b>标签设置</b>-->
			</div>
		</div>
	</div>
	<div class="customerDetail_main_contaienr">
		<div class="customerDetail_main_content">
			<div class="customerDetail_mainTitle_contaienr">
				<p>以下成员添加了{$et->name}</p>
			</div>
			<div class="customerDetail_mainCustomerInfo_contaienr">
				<div class="customerDetail_mainCustomerInfoMember_contaienr">
					<ul class="customerDetail_mainCustomerInfoMember_content">
						{loop@i $follow_user as $user}
						<li {if $i==1 } class="tabs_active" {/if} 
						data-createtime="{date('Y-m-d H:i:s',$user['createtime'])}" 
						data-remark="{$user['remark']?$user['remark']:'--'}" 
						data-remark_mobiles="{$user['remark_mobiles'][0]?$user['remark_mobiles'][0]:'--'}" 
						data-description="{$user['description']?$user['description']:'--'}">
							<img src="{$user['user']['avatar']}">
							<span>{$user['user']['name']}</span>
						</li>
						{/loop}
						<!--<li>
							<img src="https://wework.qpic.cn/wwhead/nMl9ssowtibVGyrmvBiaibzDqYSuFK37pBniauLPsZiaSAyoiafQr8nGfph2EPrHicYZfGeSYXDKAibv1PY/100">
							<span>张经理</span>
						</li>
						<li>
							<img src="https://wework.qpic.cn/wwhead/nMl9ssowtibVGyrmvBiaibzDqYSuFK37pBniauLPsZiaSAyoiafQr8nGfph2EPrHicYZfGeSYXDKAibv1PY/100">
							<span>张经理</span>
						</li>
						<li>
							<img src="https://wework.qpic.cn/wwhead/nMl9ssowtibVGyrmvBiaibzDqYSuFK37pBniauLPsZiaSAyoiafQr8nGfph2EPrHicYZfGeSYXDKAibv1PY/100">
							<span>张经理</span>
						</li>-->
					</ul>
				</div>
				<div class="customerDetail_mainCustomerInfo_content">
					<div class="customerDetail_mainCustomerInfo_List_contaienr">
						<p>成员对{$et->name}的备注和描述</p>
						<ul class="customerDetail_mainCustomerInfo_List">
							<li>
								<i class="layui-icon layui-icon-time"></i>
								<p>添加时间：<span id="createtime">{date('Y-m-d H:i:s',$follow_user[0]['createtime'])}</span></p>
							</li>
							<li>
								<i class="layui-icon layui-icon-username"></i>
								<p>备注名：<span id="remark">{$follow_user[0]['remark']?$follow_user[0]['remark']:'--'}</span></p>
							</li>
							<li>
								<i class="layui-icon layui-icon-cellphone-fine"></i>
								<p>联系方式：<span id="remark_mobiles">{$follow_user[0]['remark_mobiles'][0]?$follow_user[0]['remark_mobiles'][0]:'--'}</span></p>
							</li>
							<li>
								<i class="layui-icon layui-icon-form"></i>
								<p>描述：<span id="description">{$follow_user[0]['description']?$follow_user[0]['description']:'--'}</span></p>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script type="text/javascript">
		layui.use('layer', function(){
		  var layer = layui.layer;
		}); 
	</script>
	<script type="text/javascript">
		$('.customerDetail_mainCustomerInfoMember_content li').click(function(){
			$('.customerDetail_mainCustomerInfoMember_content li').removeClass('tabs_active');
			$(this).addClass('tabs_active');
			$('#createtime').html($(this).data('createtime'));
			$('#remark').html($(this).data('remark'));
			$('#remark_mobiles').html($(this).data('remark_mobiles'));
			$('#description').html($(this).data('description'));
		});
		/**$('.customerDetail_headerLable_container').on('click',function(){
			layer.open({
			  type: 2,
			  title: '请选择标签',
			  shadeClose: true,
			  shade: 0.2,
			  area: ['700px', '400px'],
			  content: 'check.html'
			}); 
		})*/
	</script>
</body>
</html>